<template>
  <div>
    <!-- 订单管理 -->
    <el-form :inline="true" class="orderform">
      <el-row>
        <el-col :span="6">
          <el-form-item>
            <el-input style="width: 300px" placeholder="请输入..." v-model="tag" class="search_tag" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <span>订单状态:</span>
          <el-select v-model="select_value" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-form-item>
            <el-button type="primary" @click="btn_search()"><i class="el-icon-search"></i> 搜索</el-button>
            <el-button @click="btn_clear()"><i class="el-icon-remove-outline"></i> 重置</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" class="mydiv" @click="exportExcel"><i class="el-icon-download"></i>导出</el-button>
        </el-col>
      </el-row>

      <el-table
        id="orderTable"
        :data="tableData"
        ref="multipleTable"
        :highlight-current-row="true"
        border>
        <el-table-column
          prop="id"
          label="编号">
        </el-table-column>
        <el-table-column
          prop="showName"
          label="演出名称">
        </el-table-column>
        <el-table-column
          prop="totalPrice"
          label="订单总价">
        </el-table-column>
        <el-table-column
          prop="unitPrice"
          label="单价">
        </el-table-column>
        <el-table-column
          prop="count"
          label="数量">
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型">
        </el-table-column>
        <el-table-column
          prop="buyerName"
          label="购买者">
        </el-table-column>
        <el-table-column
          prop="mobilePhone"
          label="购买者手机号">
        </el-table-column>
        <el-table-column
          prop="status"
          label="订单状态">
        </el-table-column>
        <el-table-column
          prop="create_date"
          label="创建时间"
          :formatter="dateformatter">
        </el-table-column>
        <el-table-column
          prop="update_date"
          label="更新时间"
          :formatter="dateformatter">
        </el-table-column>
      </el-table>

      <div class="mydiv">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-sizes="[5, 50, 100, 300,1000]"
          :page-size="pageSize"
          layout="sizes,total, prev, pager, next"
          :total="totalDataNumber"
          class="table-pagination">
        </el-pagination>
      </div>
    </el-form>
  </div>
</template>

<script>
  import axios from 'axios'
  import XLSX from 'xlsx'
  import FileSaver from 'file-saver'
  import moment from 'moment'

  export default {
    name: 'order',
    data() {
      return {
        tag: '',
        select_value: '', // 订单状态
        options: [{
          value: '待支付',
          label: '待支付'
        }, {
          value: '支付成功',
          label: '支付成功'
        }, {
          value: '支付失败',
          label: '支付失败'
        }, {
          value: '已失效',
          label: '已失效'
        }],
        typeoptions: [{
          value: '官方',
          label: '官方'
        }, {
          value: '转票',
          label: '转票'
        }],
        allData: [], // 所有前端分页数据
        tableData: [], // 表格数据 仅展示当前页的数据
        pageNo: 1, // 当前页数
        totalDataNumber: 0, // 总记录数
        pageSize: 5
      }
    },
    methods: {
      btn_search() {
        const vm = this
        axios.get(process.env.BASE_API + '/order/search', {
          params: {
            tag: this.tag,
            status: this.select_value
          }
        }).then(function(response) {
          var obj = response.data
          if (obj.code !== 10000) {
            vm.$message.error(obj.message)
            vm.totalDataNumber = 0
            vm.allData = []
            vm.tableData = []
          } else {
            vm.pageNo = 1
            vm.totalDataNumber = parseInt(obj.total)
            if (vm.totalDataNumber > 0) {
              vm.allData = obj.data
              vm.tableData = obj.data.slice(0, vm.pageSize)
            } else {
              vm.allData = []
              vm.tableData = []
            }
          }
        }).catch(function(error) {
          alert(error)
        })
      },
      btn_clear() {
        this.tag = ''
        this.select_value = ''
      },
      handleCurrentChange(val) {
        this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
      },
      exportExcel() {
        /* generate workbook object from table */
        const wb = XLSX.utils.table_to_book(document.querySelector('#orderTable'))
        /* get binary string as output */
        const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        try {
          FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '订单统计表.xlsx')
        } catch (e) {
          if (typeof console !== 'undefined') { console.log(e, wbout) }
        }
        return wbout
      },
      dateformatter(row, column) {
        var date = row[column.property]
        if (date === undefined) {
          return ''
        }
        return moment(date).format('YYYY-MM-DD HH:mm:ss')
      }
    }
  }
</script>

<style scoped>
  .orderform {
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .mydiv {
    float: right;
    margin-right: 10px;
  }
</style>
